<template>
  <div class="good_list">
    <div class="header">
      <router-link to="/Category">
        <span class="iconfont icon-fanhui"></span>
      </router-link>
      <h3>商品详情</h3>
    </div>
    <div class="content">
      <ul>
        <li v-for="(item, index) in goodList" :key="index">
          <router-link :to="'/GoodDetail/'+index">
            <div class="content_img">
              <img
                :src="item.goods_small_logo?item.goods_small_logo:'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000606020881_1_400x400.jpg'"
              />
            </div>
            <div class="content_text">
              <span>{{item.goods_name}}</span>
            </div>
            <br />
            <span class="price">￥{{item.goods_price}}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cid: this.$route.params.id,
      //接口要的参数
      QueryParams: {
        query: "",
        cid: "5",
        pagenum: 1,
        pagesize: 10,
      },
      goodList: [],
    };
  },
  created() {
    this.getMessage();
  },
  methods: {
    getMessage() {
      this.QueryParams.cid = this.cid;
      this.axios
        .get("https://api-hmugo-web.itheima.net/api/public/v1/goods/search", {
          data: this.QueryParams,
        })
        .then((res) => {
          this.goodList = res.data.message.goods;
        });
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 80px;
  background-color: rgb(226, 73, 73);
  line-height: 80px;
  text-align: center;
  font-size: 16px;
}
.header span {
  float: left;
}
.content ul li {
  width: 100%;
  margin-top: 15px;
  border-bottom: 1px solid rgb(170, 166, 166);
  list-style-type: none;
  float: left;
  font-size: 16px;
}
.content_img {
  width: 33.33%;
}
.content_img img {
  height: 100%;
  width: 100%;
  float: left;
}
.content_text {
  padding-left: 10px;
  padding-top: 20px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.price {
  color: red;
  margin-left: 10px;
}
li {
  text-align: left;
}
li:nth-last-child(1) {
  padding-bottom: 60px;
}
</style>